import React, { Component } from 'react';
import { Tabs } from 'antd';
import { getQueryUrlParam, messages } from 'share/common';
import PaymentHistory from 'containers/payment-request/component/payment-history';
import PaymentContent from 'containers/payment-request/component/payment-content';
import paymentService from './payment-service';
import 'styles/payment-request/payment-detail.scss';
import { connect } from 'react-redux';

const { TabPane } = Tabs;


@connect(mapStateToProps)
class PaymentDetails extends Component {

  constructor(props) {
    super(props);
    this.state = {
      paymentDetails: {},
      loading: false,
      approvalHistoryDTOs:[],
      approvalChains:[],
      tabs: [
        {
          key: 'messages',
          tab: messages('expense-18.key52')/*付款申请单信息*/
        }
      ],
      showApproval: false
    };
  }

  componentDidMount(){
    Promise.all([this.getHistory()])
      .finally(() => {
        this.setState({ loading: false });
      });
  }


  getHistory = async () => {
    const { params: { paymentRequestOID },  user: { userOID } } = this.props;
    const { tabs } = this.state;
    const ret = await paymentService.getPaymentHistory({ paymentRequestOID });
    const { approvalChains = [], approvalHistoryDTOs = [] } = ret.data.rows;
    if (!!approvalHistoryDTOs[0]) {
      tabs.push({
        key: 'history',
        tab: messages('expense-18.key53')/*审批进度*/,
      },);
    }
    this.setState({ approvalChains, approvalHistoryDTOs, tabs });
    if (!approvalChains) {
      return ;
    }
    approvalChains.forEach((approver) => {// 是否展示审批按钮
      if (approver.approverOID === userOID && approver.nodeType === 1001) {
        this.setState({ showApproval: true });
      } else if (approver.proxyApproverOIDs) {
        approver.proxyApproverOIDs.forEach((proxyApprover) => {
          if (proxyApprover === userOID && approver.nodeType === 1001) {
            this.setState({ showApproval: true });
          }
        });
      }
    });
  };

  render() {
    const { tabs, approvalChains, approvalHistoryDTOs, showApproval } = this.state;
    const { params: { paymentRequestOID, entry, approverOID = getQueryUrlParam('approverOID')}, close, admin } = this.props;
    return (
      <section className="payment-details">
        <Tabs>
          {
            tabs.map(item => React.createElement(TabPane, item, item.key === 'messages'
              ? (
                <PaymentContent
                  admin={admin}
                  isShowApproval={showApproval}
                  approvalChains={approvalChains}
                  approvalHistoryDTOs={approvalHistoryDTOs}
                  approverOID={approverOID}
                  ref="paymentContent"
                  close={close}
                  entry={entry}
                  paymentRequestOID={paymentRequestOID}
                  refreshHistory={this.getHistory}
                />
              )
              : (
                <PaymentHistory
                  entry={entry}
                  paymentRequestOID={paymentRequestOID}
                  approvalChains={approvalChains}
                  approvalHistoryDTOs={approvalHistoryDTOs}
                />
                )
            ))}
        </Tabs>
      </section>
    );
  }
}

function mapStateToProps(state) {
  return {
    user: state.login.loginUser
  };
}

PaymentDetails.propTypes = {};

export default PaymentDetails;
